<html>

 <script>
	$(function () 
		{
          $('#datepicker1').datepicker({ dateFormat: 'dd/mm/yy' });
		});
 </script> 


<style>
<!-- #form {

    margin-left: 50px;
    width: 500px
}

.indent {

    margin-left: 50px;
}

.move-down {
    margin-top: 100px;
}
 -->
table {
  border-collapse: collapse;
  border-spacing: none;
  }

thead th {
  background-color: #F7BE81;
  font-size: 12px;
  font-family: sans-serif;
  border:none;
  }

tbody td {
  font-size: 12px;
}

tr td:first-child,
tr th:first-child {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
}

tr td:last-child,
tr th:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
</style>

<div ng-app="myApp" ng-controller="ListCustCtrl">
 <h3>Transaction Details</h3> <!--class = "well" -->
 <form  novalidate name="UpdateOrderForm" id="update-order-form" method="post" action="">
 
<form novalidate name="AddNewForm" id="add-new-form" method="post" action="">
  <table>
    <tr>
	<td>Order Date  :  </td><td><input type="date" name="trandate"ng-model="newtranentrymast.trandate"></td>
   <!-- <td>Customer Name  : </td>
	<td><select  ng-model="newordertranmast.custid" ng-options="val.custid as val.Name  for val in customermast"> </select></td> 
		<td> Customer Name : </td><td><select ng-model="clist" ng-options="cust.Name for cust in customermast"></select></td>   -->
			<td> Customer Name : </td><td> <input auto-complete ui-items="custmast" ng-model="selected"> </td>
	<td>Amount: </td><td><input type="text" name = "amtreceived" ng-model="newtranentrymast.amtreceived"></td>
    </tr>
    
    <tr>
	<td>Pay Mode :</td><td><select name = "paymode" ng-model="newtranentrymast.paymode">
        <option id="CASH">CASH</option> <option id="CHEQUE">CHEQUE</option>    </select>
	</td>
	<td>Drawn on: </td><td><input type="text" name = "drawnon" ng-model="newtranentrymast.drawnon"capitalize></td>
	 <td>Dated : </td><td><input type="date" name="paydate" ng-model="newtranentrymast.paydate"> </td>
	  </tr>
	
	<tr>
	<td>On A/c of: </td><td><input type="text" name = "onactoff" ng-model="newtranentrymast.onactoff"capitalize></td>
	<td>Contact number : </td><td><input type="text" name = "contactnumber" ng-model="newtranentrymast.contactnumber"> </td>
	<!--<td>Contact number : </td><td><input type="text" {{clist.phoneno}}> </td> -->
	</tr>
		
      <tr>
      <td>From Date : </td><td><input type="date" name="fromdate" ng-model="newtranentrymast.fromdate"> </td>
	  <td>To Date : </td><td><input type="date" name="todate" ng-model="newtranentrymast.todate"> </td>
      </tr>
   
	<tr>
	   <td>Remarks :</td><td><textarea rows = "3" name="remarks" ng-model="newtranentrymast.remarks" capitalize></textarea></td> 
	 <!--  Client Address:<textarea>   {{clist.Address}} </textarea> -->
	 <td> Customer Name : </td><td><select ng-model="clist" ng-options="cust.Name for cust in customermast"></select></td> 
	<!--   <td>Employee Name : </td>
	<td><select  ng-model="newtranentrymast.empid" ng-options="val.empid as val.name  for val in employeeidmast"> </select></td>  -->
    </tr>

	
  </table>
 
   <!--<ng-disabled="UpdateCustForm.$invalid || isUnchanged(newcustomermast)" 
    <!-- <button class="btn btn-success" id="upt-exit-btn" ng-click="updtcustdata(newcustomermast)">Update</button> -->
    <a class="btn btn-success" href="#/updtorderdata/" ng-click="updtorderdata(newtranentrymast)">Update</a>
    <a href="#/editorder/" ng-click="cancel()" class="btn">Cancel</a>
	<a class="btn btn-info pull-right"  href="#/saveorderdata/" ng-click="saveorderdata(newtranentrymast)">Save</a>
     <input type="text" ng-model="name" class="search-query" placeholder="Search">
            
            <table class="table table-striped table-condensed table-hover">
                <thead>
                    <tr>
                         <th>Id</th>
                         <th>Tran Date</th>
						 <th><a href="" ng-click="predicate = 'Name'; reverse=!reverse">Customer Name</a></th> 
						 <th>Amount</th>
                         <th>Pay Mode</th>
                         <th>Drawn on</th>
						 <th>Dated</th>
                         <th>On A/c of</th>
						 <th>Phone No</th>
						 <th>From Date</th>
						 <th>To Date</th>
                         <th>Remarks</th>
                         <th>Status</th>
						 <th>Entered By</th>
                         <th>Entered Date</th>
                         <th>Del</th>
                         <th>Edit</th>
                   </tr>
                </thead>
                <tbody>
				<!-- filter:{custid.length:clist.custid.length}" ng-model="invoicedatamodel"  filter:{custid:clist.custid} | -->
                      <tr ng-repeat="item in tranentrymast | filter: name | orderBy:predicate:reverse | startingFrom:currentPage*pageSize | limitTo:pageSize">
                         <td>{{item.tranid}}</td>
                         <td>{{item.trandate | date:'dd/MM/yyyy'}}</td>
                         <td>{{item.customername}}</td>      
						 <td>{{item.amtreceived | number:0}}</td>
						 <td>{{item.paymode}}</td> 
						 <td>{{item.drawnon}}</td> 
                         <td>{{item.paydate  | date:'dd/MM/yyyy'}}</td> 
                         <td>{{item.onactoff}}</td> 
                         <td>{{item.contactnumber}}</td>
						 <td>{{item.fromdate  | date:'dd/MM/yyyy'}}</td>
						 <td>{{item.todate  | date:'dd/MM/yyyy'}}</td>
                         <td>{{item.remarks}}</td> 
					     <td>{{item.status}}</td>
						 <td>{{item.enteredby}}</td>
                         <td>{{item.entrydt | date:'dd/MM/yyyy'}}</td>
                         <td><a href="#/deletetran/" ng-click="deletetran(item.tranid)"> <img src="glyphicons_bin.png" alt="Delete"/></td> 
						<td><a href="#/edittran/" ng-click="edit(item.tranid)"> <img src="glyphicons_edit.png" alt="Edit"/></td> 
                    </tr>
               </tbody>
              <!--  <tr ng-show="editId===item.custid" ng-if="editId===item.custid">
            <td colspan="7" ng-include src="'editRow.html'"></td>
        </tr>-->
			
            </table>
    <!-- <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">Previous</button>
				{{currentPage+1}}/{{customermast.length/pageSize}}
				<button ng-disabled="currentPage >= customermast.length/pageSize - 1" ng-click="currentPage=currentPage+1">
				Next pagedItems
				</button> -->
               
             <tfoot>
             Current Page  {{currentPage+1}} of {{Math.ceil(tranentrymast.length/pageSize)}}
                    <td colspan="6">
                        <div class="pagination pull-right">
                            <ul>
                              <!--  <li ng-class="{disabled: currentPage == 0}">
                                    <a href ng-click="currentPage=currentPage-1">« Prev</a> 
                                </li>-->
                <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"> « Prev </button>
                                
                         <li ng-repeat="n in range(tranentrymast.length)"
                                    ng-class="{active: n == currentPage}"
                                    ng-click="setPage()">
                                    <a href ng-bind="n + 1">1</a>
                                </li> 
                    <!--    <li ng-class="{disabled: currentPage >= customermast.length/pageSize - 1 }">
                                    <a href ng-click="currentPage=currentPage+1">Next »</a>  -->
        <button ng-disabled="currentPage >= tranentrymast.length/pageSize - 1" ng-click="currentPage=currentPage+1">
        Next »
    </button>
       </li>
      </ul>
    </div>
  </td>
  </tfoot>
       </div>  
  </body>
</html>
